<template>
  <div class="overall">
    <div class="header" :class="{ 'header-exit': isExiting }">
      <div class="icon" :class="{ 'icon-exit': isExiting }"></div>
      <div class="titles" :class="{ 'titles-exit': isExiting }">
        <h1 class="h1">我是甲骨小文，很高兴见到你！</h1>
        <h2 class="h2">我可以帮你识别甲骨文、寻找它的出处。</h2>
      </div>
    </div>

     <div v-if="selectedFiles.length > 0" class="files-info" :class="{ 'files-exit': isExiting }">
      <div v-for="(file, index) in selectedFiles" :key="file.id" class="file-item">
        <el-tag
          closable
          @close="removeFile(index)"
          @click="showPreviewFile(file)"
          class="file-tag"
        >
          <span class="file-name">{{ truncateFileName(file.name) }}</span>
          <span class="file-size">({{ formatFileSize(file.size) }})</span>
        </el-tag>
      </div>
    </div>

    <div class="input-wrapper" :class="{ 'input-exit': isExiting }">
      <el-input
        v-model="textarea2"
        @input="handleInput"
        class="custom-textarea"
        type="textarea"
        placeholder="请输入要查询的信息"
        @keydown.enter.prevent="handleEnter"  
        :autosize="{ minRows: 3, maxRows: 10 }"
        resize="none"
      />

    <div class="buttons-left" >
        <div 
          class="rect-button"
        
          @click="handleSingleChar"
      
        >
          <span>已识甲骨文字识别</span>
        </div>
        <div 
          class="rect-button"
         
          @click="handleCharSearch"
         
        >
          <span>甲骨文字检索</span>
        </div>
        <div 
          class="rect-button"
         
          @click="handleRubbingGen"
         
        >
          <span>拓片摹本生成</span>
        </div>
         <div 
          class="rect-button"
         
          @click="handleRubbingSearch"
         
        >
          <span>拓片重见检索</span>
        </div>
      </div>

      <div class="buttons-inside">

        <div class="circle2" @click="openFileDialog" title="点击上传图片（可多选）">
          <el-icon class="icron3"><Link /></el-icon>
          <input
            ref="fileInput"
            type="file"
            style="display: none"
            accept="image/*"
            multiple
            @change="handleFileUpload"
          />
        </div>

        <div
          class="circle"
          :class="{
            'has-content': textarea2.trim() !== '' || selectedFiles.length > 0,
            'disabled': !textarea2.trim() && selectedFiles.length === 0
          }"
          @click="handleQuestion"
        >
          <el-icon class="icon2" :size="20"><Top /></el-icon>
        </div>
      </div>
    </div>



     <el-dialog 
      v-model="dialogVisible" 
      title="图片预览" 
      width="60%"
      @closed="resetPreview"
    >
      <div 
        class="preview-container"
        :class="{ 'grabbing': isDragging }"
        @wheel.prevent="handleZoom"
        @mousedown.prevent="startDrag"
        @mousemove.prevent="onDrag"
        @mouseup.prevent="endDrag"
        @mouseleave.prevent="endDrag"
      >
        <img 
          ref="previewImgEl"
          :src="previewImgData.url" 
          :style="imgTransform"
          class="preview-content"
          draggable="false"
          @dragstart.prevent
        />
      </div>
      <template #footer>
        <div class="preview-controls">
          <el-button @click="zoomIn" circle size="small">
            <el-icon><Plus /></el-icon>
          </el-button>
          <el-button @click="zoomOut" circle size="small">
            <el-icon><Minus /></el-icon>
          </el-button>
          <el-button @click="resetPreview" circle size="small">
            <el-icon><Refresh /></el-icon>
          </el-button>
          <span class="zoom-info">缩放: {{ (zoomLevel * 100).toFixed(0) }}%</span>
        </div>
      </template>
    </el-dialog>


    <el-alert
      v-if="showEmptyAlert"
      title="请输入查询内容或上传图片"
      type="warning"
      :closable="false"
      class="alert-message"
    />
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Top, Link, Plus, Minus, Refresh } from '@element-plus/icons-vue'
import { ElAlert, ElTag, ElMessage, ElDialog, ElButton, ElIcon } from 'element-plus'
import { useQuestionStore } from '@/stores'
import { useUserStore } from '@/stores'
import fileData from '@/assets/name2path.json'
const questionStore = useQuestionStore()
const router = useRouter()
const userStore = useUserStore()
const fileInput = ref(null)
const textarea2 = ref('')
const showEmptyAlert = ref(false)
const selectedFiles = ref([])
const currentPreviewUrl = ref('')
const previewVisible = ref(false)
const isExiting = ref(false)
const previewImage = ref(null)
let fileIdCounter = 0
const hasToken = computed(() => !!userStore.token)
// 图片缩放和拖拽相关状态
// 图片预览相关
const dialogVisible = ref(false)
const previewImgData = ref({ url: '', name: '' })

const previewImgEl = ref(null)
const zoomLevel = ref(1)
const isDragging = ref(false)
const imgPosition = ref({ x: 0, y: 0 })
const dragStartPos = ref({ x: 0, y: 0 })
const dragStartOffset = ref({ x: 0, y: 0 })


const handleGlyphSearch = () => {
  router.push('/dictCharSearch'); // 替换为你的实际路由
};

const handleSingleCharSearch = () => {
  router.push('/image-cropping'); // 替换为你的实际路由
};


const imgTransform = computed(() => ({
  transform: `translate(${imgPosition.value.x}px, ${imgPosition.value.y}px) scale(${zoomLevel.value})`,
  cursor: isDragging.value ? 'grabbing' : (zoomLevel.value > 1 ? 'grab' : 'default')
}))


const handleZoom = (e) => {
  e.preventDefault()
  const delta = e.deltaY > 0 ? -0.1 : 0.1
  const newZoom = Math.min(Math.max(0.1, zoomLevel.value + delta), 5)
  
  // 保持当前位置不变，只更新缩放比例
  zoomLevel.value = newZoom
  
  // 如果图片小于容器，强制居中
  const container = e.currentTarget.getBoundingClientRect()
  const imgWidth = previewImgEl.value.naturalWidth * zoomLevel.value
  const imgHeight = previewImgEl.value.naturalHeight * zoomLevel.value
  
  if (imgWidth <= container.width && imgHeight <= container.height) {
    imgPosition.value = { x: 0, y: 0 }
  }
}

const zoomIn = () => {
  const newZoom = Math.min(zoomLevel.value + 0.1, 5)
  zoomLevel.value = newZoom
  
  const container = previewImgEl.value?.parentElement.getBoundingClientRect()
  if (!container) return
  
  const imgWidth = previewImgEl.value.naturalWidth * zoomLevel.value
  const imgHeight = previewImgEl.value.naturalHeight * zoomLevel.value
  
  if (imgWidth <= container.width && imgHeight <= container.height) {
    imgPosition.value = { x: 0, y: 0 }
  }
}

const zoomOut = () => {
  const newZoom = Math.max(zoomLevel.value - 0.1, 0.1)
  zoomLevel.value = newZoom
  
  const container = previewImgEl.value?.parentElement.getBoundingClientRect()
  if (!container) return
  
  const imgWidth = previewImgEl.value.naturalWidth * zoomLevel.value
  const imgHeight = previewImgEl.value.naturalHeight * zoomLevel.value
  
  if (imgWidth <= container.width && imgHeight <= container.height) {
    imgPosition.value = { x: 0, y: 0 }
  }
}




const startDrag = (e) => {
  if (zoomLevel.value <= 1) return
  
  isDragging.value = true
  dragStartPos.value = {
    x: e.clientX,
    y: e.clientY
  }
  dragStartOffset.value = {
    x: imgPosition.value.x,
    y: imgPosition.value.y
  }
  document.body.style.userSelect = 'none'
  document.body.style.cursor = 'grabbing'
}

const onDrag = (e) => {
  if (!isDragging.value || zoomLevel.value <= 1) return
  
  const dx = e.clientX - dragStartPos.value.x
  const dy = e.clientY - dragStartPos.value.y
  
  imgPosition.value = {
    x: dragStartOffset.value.x + dx,
    y: dragStartOffset.value.y + dy
  }
  
  const container = previewImgEl.value?.parentElement.getBoundingClientRect()
  if (!container) return
  
  const imgWidth = previewImgEl.value.naturalWidth * zoomLevel.value
  const imgHeight = previewImgEl.value.naturalHeight * zoomLevel.value
  
  // 限制移动范围
  if (imgWidth > container.width) {
    const maxX = (imgWidth - container.width) / 2
    const minX = -maxX
    imgPosition.value.x = Math.max(minX, Math.min(maxX, imgPosition.value.x))
  } else {
    imgPosition.value.x = 0
  }
  
  if (imgHeight > container.height) {
    const maxY = (imgHeight - container.height) / 2
    const minY = -maxY
    imgPosition.value.y = Math.max(minY, Math.min(maxY, imgPosition.value.y))
  } else {
    imgPosition.value.y = 0
  }
}

const endDrag = () => {
  isDragging.value = false
  document.body.style.userSelect = ''
  document.body.style.cursor = ''
}



const resetPreview = () => {
  zoomLevel.value = 1
  imgPosition.value = { x: 0, y: 0 }
}

const showPreviewFile = (item) => {
  previewImgData.value = {
    url: item.url,
    name: item.name
  }
  dialogVisible.value = true
}


const handleSingleChar = () => {
  if(selectedFiles.value.length == 0) {
    ElMessage.error('请先上传想要查询的甲骨文图片')
     return
  }
  textarea2.value = '请给我解释一下图片上的甲骨文字是什么？'
  handleQuestion()
  // 这里添加单字识别功能逻辑
}

const handleCharSearch = () => {
   if(selectedFiles.value.length == 0) {
    ElMessage.error('请先上传想要查询的甲骨文图片')
     return
  }
  textarea2.value = '请给我说明一下图片上的甲骨文字在哪里出现过？'
  handleQuestion()
 
}

const handleRubbingGen = () => {
   if(selectedFiles.value.length == 0) {
    ElMessage.error('请先上传想要查询的甲骨图片')
    return
  }
  textarea2.value = '识别甲骨单字图片(拓片,摹本),给我生成清晰的摹本？'
  handleQuestion()

}
const handleRubbingSearch = () => {
  if(selectedFiles.value.length == 0) {
    ElMessage.error('请先上传想要查询的甲骨图片')
     return
  }
  textarea2.value = '请给我说明一下这个拓片的在哪里出现过？'
  handleQuestion()
}



const handleInput = () => {
  showEmptyAlert.value = false
}

const handleQuestion = async () => {
if (!hasToken.value) {
    router.push('/login')
    return
}

  if (!textarea2.value.trim() && selectedFiles.value.length === 0) {
    showEmptyAlert.value = true
    setTimeout(() => {
      showEmptyAlert.value = false
    }, 2000)
    return
  }

  isExiting.value = true
  await new Promise(resolve => setTimeout(resolve, 500))
  
  if (textarea2.value.trim()) {
    questionStore.setCurrentQuestion(textarea2.value)
  }

  if (selectedFiles.value.length > 0) {
    questionStore.setSelectedFiles([...selectedFiles.value])
  }
  questionStore.isNew=true
  router.push('/questionAi')
}

const handleEnter = () => {
  if (textarea2.value.trim() || selectedFiles.value.length > 0) {
    handleQuestion()
  }
}

const openFileDialog = () => {
  fileInput.value?.click()
}

const handleFileUpload = async (event) => {
  const files = Array.from(event.target.files)
  if (!files.length) return

  if (selectedFiles.value.length + files.length >1) {
    ElMessage.error('最多只能上传1张图片')
    event.target.value = ''
    return
  }

  event.target.value = ''

  const uploadPromises = files.map(file => {
    return new Promise((resolve) => {
      if (!file.type.startsWith('image/')) {
        ElMessage.error(`文件"${file.name}"不是有效的图片格式`)
        resolve(null)
        return
      }
      
      if (file.size > 5 * 1024 * 1024) {
        ElMessage.error(`文件"${file.name}"超过大小限制 (5MB)`)
        resolve(null)
        return
      }

      const isDuplicate = selectedFiles.value.some(
        f => f.name === file.name && f.size === file.size
      )
      
      if (isDuplicate) {
        ElMessage.warning(`文件"${file.name}"已存在`)
        resolve(null)
        return
      }

      const reader = new FileReader()
      reader.onload = () => {
        resolve({
          id: fileIdCounter++,
          name: file.name,
          size: file.size,
          file: file,
          url: reader.result
        })
      }
      reader.onerror = () => {
        ElMessage.error(`文件"${file.name}"读取失败`)
        resolve(null)
      }
      reader.readAsDataURL(file)
    })
  })

  const newFiles = (await Promise.all(uploadPromises)).filter(Boolean)
  
  if (newFiles.length > 0) {
    selectedFiles.value = [...selectedFiles.value, ...newFiles]
    ElMessage.success(`成功添加 ${newFiles.length} 个文件`)
  }
}

const removeFile = (index) => {
  selectedFiles.value.splice(index, 1)
  ElMessage.success('文件已移除')
}

const previewFile = (index) => {
  currentPreviewUrl.value = selectedFiles.value[index].url
  previewVisible.value = true
}

const formatFileSize = (bytes) => {
  if (bytes === 0) return '0 Bytes'
  const k = 1024
  const sizes = ['Bytes', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

const truncateFileName = (name) => {
  const maxLength = 18
  if (name.length > maxLength) {
    return name.substring(0, maxLength) + '...'
  }
  return name
}


</script>

<style scoped lang="scss">
/* 全局变量 */
$primary-color: #8B4513;
$secondary-color: #d4a373;
$light-bg: #fffaf5;
$border-color: #e7d9c8;

/* 基础布局 */
.overall {
   position: relative;
  margin-top: 6rem;
  font-family: 'Microsoft YaHei', sans-serif;
  width: 100%;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 2rem;
  box-sizing: border-box;
}

/* 头部区域 */
.header {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  transition: all 0.5s ease;
}

.header-exit {
  transform: translateY(-100px);
  opacity: 0;
}

.icon {
  background-image: url('@/assets/logo.png');
  width: 4.5rem;
  height: 4.5rem;
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
  transition: all 0.5s ease;
}

.icon-exit {
  transform: translateY(-100px);
  opacity: 0;
}

.titles {
  text-align: center;
  transition: all 0.5s ease;
}

.titles-exit {
  transform: translateY(-100px);
  opacity: 0;
}

.h1 {
  letter-spacing: 0.25rem;
  font-size: 1.8rem;
  font-weight: bold;
  background: linear-gradient(to right, $primary-color, $secondary-color, $primary-color);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 2px 4px rgba(139, 69, 19, 0.2);
  margin: 0;
}

.h2 {
  font-size: 1.1rem;
  line-height: 1.6;
  background: linear-gradient(to right, $primary-color, $secondary-color);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin: 0.5rem 0 0 0;
}

/* 输入区域 */
.input-wrapper {
  position: relative;
  width: 100%;
  border-radius: 1rem;
  background: linear-gradient(145deg, #fffbf8, #f5ede4);
  box-shadow: 
    0 4px 20px rgba(139, 69, 19, 0.08),
    inset 0 1px 2px rgba(255, 255, 255, 0.8);
  padding: 0.25rem;
  transition: all 0.5s ease;
}

.input-exit {
  transform: translateY(100px);
  opacity: 0;
}

.custom-textarea :deep(.el-textarea__inner) {
  width: 100% !important;
  border-radius: 0.8rem !important;
  padding: 1.2rem 1.5rem 4rem;
  border: 2px solid $border-color;
  background-color: #fffdfb;
  font-size: 1rem;
  line-height: 1.6;
  color: #5a3e2b;
  font-family: 'Microsoft YaHei', sans-serif;
  transition: all 0.3s ease;
  resize: none !important;
  box-shadow: none;
  min-height: 8rem;
}

.custom-textarea :deep(.el-textarea__inner:focus) {
  border-color: $secondary-color;
  background-color: #fff9f2;
  box-shadow: 
    0 0 0 3px rgba(212, 163, 115, 0.15),
    inset 0 1px 3px rgba(0, 0, 0, 0.05);
  outline: none;
}

.custom-textarea :deep(.el-textarea__inner:hover) {
  border-color: #d0b9a0;
}

.custom-textarea :deep(.el-textarea__inner::placeholder) {
  color: #b7a08e;
  font-style: italic;
  opacity: 0.8;
}


.buttons-left {
  position: absolute;
  left: 1rem;
  bottom: 0.8rem;
  display: flex;
  gap: 0.5rem; /* 增大间距 */
  z-index: 2;
  align-items: center;
  min-height: 3rem; /* 提高最小高度 */
}

.rect-button {
  padding: 0.5rem 1rem; /* 增大内边距 */
  background: linear-gradient(145deg, #f9f3ec, #ebddcc);
  border-radius: 0.5rem; /* 加大圆角 */
  cursor: pointer;
  position: relative;
  box-shadow: 
    0 3px 8px rgba(139, 69, 19, 0.12),
    inset 0 1px 3px rgba(255, 255, 255, 0.9); /* 增强内阴影 */
  border: 1px solid #e0c9b8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem; /* 增大字体 */
  font-weight: 500; /* 加粗字体 */
  color: $primary-color;
  transform: translateY(0);
  transform-origin: center;
  user-select: none;

  
  span {
    white-space: nowrap;
    position: relative;
    z-index: 1; /* 确保文字在装饰元素上方 */
  }
  
  /* 添加细微装饰元素增强质感 */
  &::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    border-radius: 0.65rem;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(255, 255, 255, 0) 100%
    );
    pointer-events: none;
  }
}

.rect-button:hover {
  background: linear-gradient(145deg, #f5e9dd, #e0c9b8);
 
  box-shadow: 
    0 6px 12px rgba(139, 69, 19, 0.18),
    inset 0 1px 3px rgba(255, 255, 255, 0.7);
}

/* 点击状态样式优化 */
.rect-button:active {
  transform: translateY(-1px) scale(0.99); /* 轻微缩放更自然 */
  box-shadow: 
    0 2px 5px rgba(139, 69, 19, 0.15),
    inset 0 2px 4px rgba(0, 0, 0, 0.12);
}



/* 响应式调整 */
@media (max-width: 768px) {
  .buttons-left {
    gap: 0.6rem;
    bottom: 1rem;
    min-height: 2.8rem;
  }
  
  .rect-button {
    padding: 0.4rem 1rem;
    font-size: 0.9rem;
    border-radius: 0.65rem;
  }
}

@media (max-width: 480px) {
  .buttons-left {
    flex-direction: column;
    gap: 0.5rem;
    bottom: 4.5rem;
    left: 1rem;
    min-height: auto;
  }
  
  .rect-button {
    padding: 0.35rem 0.9rem;
    font-size: 0.85rem;
    border-radius: 0.6rem;
  }
}









/* 按钮区域 */
.buttons-inside {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  gap: 0.8rem;
  z-index: 2;
}

.circle2 {
  width: 2.2rem;
  height: 2.2rem;
  background: linear-gradient(145deg, #f9f3ec, #ebddcc);
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  box-shadow: 
    0 2px 5px rgba(139, 69, 19, 0.1),
    inset 0 1px 2px rgba(255, 255, 255, 0.8);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  border: 1px solid #e0c9b8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.circle2:hover {
  background: linear-gradient(145deg, #f5e9dd, #e0c9b8);
  transform: translateY(-2px);
  box-shadow: 
    0 4px 8px rgba(139, 69, 19, 0.15),
    inset 0 1px 2px rgba(255, 255, 255, 0.6);
}

.icron3 {
  color: $primary-color;
  font-size: 1rem;
  transition: all 0.2s ease;
}

.circle2:hover .icron3 {
  transform: scale(1.1);
}

.circle {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 
    0 2px 5px rgba(139, 69, 19, 0.1),
    inset 0 1px 2px rgba(255, 255, 255, 0.5);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}

.circle:not(.has-content) {
  background: linear-gradient(145deg, #e8e8e8, #d8d8d8);
}

.circle.has-content {
  background: linear-gradient(145deg, $secondary-color, #b58863);
  box-shadow: 
    0 3px 8px rgba(212, 163, 115, 0.3),
    inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

.circle.has-content:hover {
  background: linear-gradient(145deg, #e0b389, #c9976e);
  transform: translateY(-4px);
  box-shadow: 
    0 5px 12px rgba(212, 163, 115, 0.4),
    inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

.circle.disabled {
  background: #e8e8e8 !important;
  cursor: not-allowed;
  box-shadow: none;
}

.icon2 {
  color: white;
  font-size: 1rem;
  transition: all 0.2s ease;
}

.circle.has-content:hover .icon2 {
  transform: scale(1.1);
}

.files-info {
   position: absolute;
   top: 5.2rem;
  width: 80%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  transition: all 0.5s ease;
}

.files-exit {
  transform: translateY(100px);
  opacity: 0;
}

.file-item {
  width: calc(50% - 4px);
  box-sizing: border-box;
}

@media (max-width: 600px) {
  .file-item {
    width: 100%;
  }
}

.file-tag {
  cursor: pointer;
  transition: all 0.3s;
  background: linear-gradient(to right, #8B4513, #d4a373);
  color: white;
  border: none;
  padding: 3px 15px;
  border-radius: 12px;
  font-size: 13px;
  display: flex;
  align-items: center;
  width: 100%;
  overflow: hidden;
}

.file-tag:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(139, 69, 19, 0.15);
}

.file-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.file-size {
  font-size: 0.8em;
  opacity: 0.8;
  margin-left: 5px;
  white-space: nowrap;
}

/* 图片预览区域 */
.preview-container {
  width: 100%;
  height: 60vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  border-radius: 8px;
  position: relative;
  cursor: grab;
  touch-action: none;
}

.preview-container.grabbing {
  cursor: grabbing;
}

.preview-content {
  max-width: initial;
  max-height: initial;

  will-change: transform;
  user-select: none;
  pointer-events: none;
  transform-origin: center center;
}

.preview-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.zoom-info {
  margin-left: 10px;
  font-size: 14px;
  color: #666;
}

/* 警告信息 */
.alert-message {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18rem;
  z-index: 100;
  border-radius: 0.8rem;
  background: linear-gradient(145deg, #fff9f5, #f5e9dd);
  border: 1px solid #f0d4b8;
  box-shadow: 0 3px 10px rgba(139, 69, 19, 0.1);
}

/* 对话框样式 */
:deep(.el-dialog__title) {
  background: linear-gradient(to right, $primary-color, $secondary-color);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 600;
  letter-spacing: 0.05rem;
}




/* 1. 超大屏幕显示器 (≥1920px) */
@media (min-width:2300px) {
  .overall {
    max-width: 1000px;
    margin-top: 11rem;
  }
  
  .files-info {
    top: 7.2rem;
    gap: 1.2rem;
  }
  
  .file-tag {
    font-size: 1.1rem;
    padding: 0.7rem 1.6rem;
    border-radius: 14px;
  }
  
  .file-size {
    font-size: 0.9em;
  }
  
  .image-container {
    height: 80vh;
  }
    .icon {
      width: 6rem;
     height: 6rem;
  }
  h1 {
    font-size: 2.8rem !important;
  }
  h2 {
     font-size: 1.6rem !important;
  }

}


@media (min-width: 2100px)and (max-width: 2300px) {

    .overall {
    max-width: 1000px;
    margin-top: 11.5rem;
  }
  
  .files-info {
    top: 6.6rem;
    gap: 1.2rem;
  }
  
  .file-tag {
    font-size: 1rem;
    padding: 0.6rem 1.5rem;
    border-radius: 14px;
  }
  
  .file-size {
    font-size: 0.9em;
  }
  
  .image-container {
    height: 80vh;
  }
    .icon {
      width: 5.9rem;
  height: 5.9rem;
  }
  h1 {
    font-size: 2.6rem !important;
  }
  h2 {
     font-size: 1.7rem !important;
  }


  
}


@media (min-width: 1920px)and (max-width: 2100px) {
  .overall {
    max-width: 950px;
    margin-top: 10rem;
  }
  
  .files-info {
    top: 6.6rem;
    gap: 1.2rem;
  }
  
  .file-tag {
    font-size: 1rem;
    padding: 0.6rem 1.5rem;
    border-radius: 14px;
  }
  
  .file-size {
    font-size: 0.9em;
  }
  
  .image-container {
    height: 75vh;
  }
    .icon {
      width: 5.5rem;
  height: 5.5rem;
  }
  h1 {
    font-size: 2.4rem !important;
  }
  h2 {
     font-size: 1.5rem !important;
  }

}

/* 2. 大屏幕显示器 (1751px - 1919px) */
@media (min-width: 1751px) and (max-width: 1919px) {
  .overall {
    max-width: 900px;
    margin-top: 8rem;
  }
  
  .files-info {
    top: 5.9rem;
    gap: 1.1rem;
  }
  
  .file-tag {
    font-size: 1rem;
    padding: 0.5rem 1.4rem;
    border-radius: 14px;
  }
  
  .file-size {
    font-size: 1em;
  }
  
  .image-container {
    height: 70vh;
  }
  .icon {
      width: 5rem;
  height: 5rem;
  }
  h1 {
    font-size: 2.2rem !important;
  }
  h2 {
     font-size: 1.3rem !important;
  }

}

/* 3. 中大屏幕显示器 (1601px - 1750px) */
@media (min-width: 1601px) and (max-width: 1750px) {

  .overall {
    max-width: 850px;
    margin-top: 7rem;
  }
  
  .files-info {
    top: 5.7rem;
    gap: 0.9rem;
  }
  
  .file-tag {
    font-size: 0.9rem;
    padding: 0.4rem 1.2rem;
    border-radius: 14px;
  }
  

  .image-container {
    height: 66vh;
  }
  .icon {
      width: 4.8rem;
  height: 4.8rem;
  }
  h1 {
    font-size: 2.1rem !important;
  }
  h2 {
     font-size: 1.2rem !important;
  }
}


@media (max-width: 1440px) {

  .buttons-left {
    gap: 0.5rem;
    bottom: 0.5rem;
    min-height: 3.5rem;
  }
  
  .rect-button {
    padding: 0.4rem 1rem;
    font-size: 0.9rem;
    border-radius: 0.65rem;
  }
  .overall {
    max-width: 750px;
    margin-top: 5rem;
  }
  
  .files-info {
    top: 5.1rem;
    gap: 0.8rem;
  }
  
  .file-item {
    width: calc(50% - 0.4rem);
  }
  
  .file-tag {
    font-size: 0.85rem;
    padding: 0.3rem 1rem;
  }
  
  .image-container {
    height: 60vh;
  }
}

@media (max-width: 1280px) {

    .buttons-left {
      left: 0.8rem;
    gap: 0.3rem;
    bottom: 0.5rem;
    min-height: 3.5rem;
  }
  
  .rect-button {
    padding: 0.4rem 1rem;
    font-size: 0.8rem;
    border-radius: 0.65rem;
  }
  .overall {
    max-width: 700px;
  }
  
  
  .files-info {
    top: 5.1rem;
   
  }
  
  
  .file-tag {
    font-size: 0.8rem;
    padding: 0.25rem 0.8rem;
  }
  
  .file-name {
    max-width: 120px;
  }
  
  .image-container {
    height: 55vh;
  }
}

@media (max-width: 1024px) {
  .file-item {
    width: 100%;
  }
    
  .files-info {
    top: 5.1rem;
   
  }
  
  .file-tag {
    padding: 0.3rem 1rem;
    justify-content: space-between;
  }
  
  .file-name {
    max-width: none;
    flex: 0 0 calc(100% - 70px);
  }
  
  .image-container {
    height: 50vh;
  }
}

@media (max-width: 768px) {
  .overall {
    padding: 0 1rem;
    margin-top: 4rem;
  }
  
  .image-container {
    height: 40vh;
  }
  
  .zoom-controls {
    padding: 8px;
    gap: 8px;
  }
  
  .zoom-level {
    font-size: 12px;
  }
}
</style>